<template>
  <div class="content">
    <el-dialog
      title="题目预览"
      :visible="dialogVisible"
      width="900px"
      :before-close="handleClose"
    >
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            {{
              `【题型】: ${
                detailData.questionType == "1"
                  ? "单选题"
                  : detailData.questionType == "2"
                  ? "多选题"
                  : "简答题"
              }`
            }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            {{ `【编号】: ${detailData.id}` }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            {{
              `【难度】: ${
                detailData.difficulty == "1"
                  ? "简单"
                  : detailData.difficulty == "2"
                  ? "一般"
                  : "困难"
              }`
            }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            {{ `【标签】: ${detailData.tags ? detailData.tags : ""}` }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            {{ `【学科】: ${detailData.subjectName}` }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            {{ `【目录】: ${detailData.directoryName}` }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            {{ `【方向】: ${detailData.direction}` }}
          </div>
        </el-col>
      </el-row>
      <hr />
      【题干】：
      <div class="questionStem" v-html="detailData.question"></div>
      <!-- // 单选 -->
      <div class="topicType" v-show="detailData.questionType == '1'">
        <div>单选题 选项： (以下选中的选项为正确答案)</div>
        <el-radio-group v-model="radio">
          <el-row v-for="city in detailData?.options" :key="city.id + 'o'" class="radio">
            <el-radio :label="city.isRight">{{ city.title }}</el-radio>
          </el-row>
        </el-radio-group>
      </div>
      <!-- 多选 -->
      <el-checkbox-group v-model="checkbox">
      <div class="topicType" v-show="detailData.questionType == '2'">
        <div>多选题 选项： (以下选中的选项为正确答案)</div>
          <el-row v-for="item in detailData?.options" :key="item.id + 'p'" class="radio">
            <el-checkbox  :label="item.isRight">{{ item.title}}</el-checkbox>
          </el-row>
      </div>
    </el-checkbox-group>
      <hr />
      【参考答案】：
      <el-button type="danger" size="mini" @click="video = true"
        >视频答案预览</el-button
      >
      <div v-if="video">
        <iframe
          width="400"
          height="300"
          :src="previewData.videoURL"
          frameborder="0"
          allowfullscreen
        ></iframe>
        <video
          autoplay="autoplay"
          controls="controls"
          :src="previewData.videoURL"
          class="video"
        ></video>
      </div>
      <hr />
      【答案解析】:
      <span v-html="previewData.answer" style="display: inline-block"></span>
      <hr />
      【题目备注】: <span>{{ previewData.remarks }}</span>
      <!-- 底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose" type="primary">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    previewData: {
      type: Object
    },
    detailData: {
      type: Object
    }
  },
  data () {
    return {
      // 播放视频
      video: false,
      radio: 1,
      checkbox: [1, 1, 1, 1, 1]
    }
  },
  methods: {
    handleClose () {
      this.$emit('update:dialogVisible', false)
      // 关闭视频
      this.video = false
    }
  }
}
</script>

<style scoped lang='scss'>
.dialog-footer {
  position: relative;
  left: 392px;
}

.el-col {
  padding: 10px 0;
}

.questionStem {
  margin: 14px 0;
  color: #0000ff;
}

.radio {
  padding: 8px 0;
}
.video {
  width: 400px;
  height: 300px;
}
</style>
